<!-- 产品碳足迹-模型搭建-输入输出表单因子卡片 -->

<template>
  <div class="">
    <div class="list_card_content_item">
      <div class="list_card_content_item_box1">
        <img class="list_card_content_item_box1_icon" src="@assets/img/img6.png" alt=""/>
        <div class="list_card_content_item_box1_text">
          <div class="list_card_content_item_box1_text2 m_pass_1line_hidden2" :title="item.name">
            {{ item.name }}
          </div>
          <div class="list_card_content_item_box1_text3 m_pass_1line_hidden2" :title="item.model">
            {{ item.model }}
          </div>
        </div>
      </div>
      <div class="list_card_content_item_box2"> {{ (Number(item.factorValue)).toFixed(4) }} <span>
        {{ item.numeratorUnit }}/{{ item.denominatorUnit }}</span></div>

      <div class="list_card_content_item_box3">
        <div class="list_card_content_item_box4_text" :title="item.productClassification_dictText"> {{ item.productClassification_dictText || '-' }}</div>
        <div class="list_card_content_item_box4_text2" :title="item.scene"> {{getContent(item.scene)}}</div>
      </div>

      <div class="list_card_content_item_box4">
        <div class="list_card_content_item_box4_text"> {{ item.releaseOrg || '-' }}</div>
        <div class="list_card_content_item_box4_text2"> {{ item.releaseYear || '-' }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {};
  },
  created() {
  },
  methods: {
    getContent(content){
      if (!content){
        return "-"
      }
      //超过五个字就截取
      if(content.length > 5){
        return content.substring(0,5)+"..."
      }
      return content
    },
  },
};

</script>

<style lang="less" scoped>
.list_card_content_item {
  overflow: hidden;
  height: 160px;
  position: relative;
  border-radius: 5px;
  background-image: url("../../assets/img/img1.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.list_card_content_item_box1 {
  margin-top: 12px;
  margin-left: 16px;
  display: flex;
  align-items: center
}

.list_card_content_item_box1_icon {
  width: 24px;
  height: 24px;
}

.list_card_content_item_box1_text {
  margin-left: 12px;
  display: flex;
  align-items: flex-end;
}

.list_card_content_item_box1_text2 {
  max-width: 200px;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 18px;
  color: #333333;
  line-height: 20px;
}

.list_card_content_item_box1_text3 {
  margin-left: 8px;
  max-width: 110px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 14px;
}

.list_card_content_item_box2 {
  margin-top: 12px;
  margin-left: 52px;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 28px;
  color: #148958;


  span {
    font-size: 12px;
  }
}

.list_card_content_item_box3 {
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.list_card_content_item_box4 {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 0;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 33px;
  background: #148958;
  border-radius: 0px 0px 4px 4px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
}


</style>
